<template>
  <div class="admin">
    <el-button
      type="primary"
      style="margin: 10px"
      @click="
        centerDialogVisible = true;
        type = 1;
      "
      >新增</el-button
    >
    <el-table :data="list" style="width: 100%">
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.role == "USER" ? "普通管理员" : "超级管理员" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="row.status == 'NORMAL' ? 'success' : 'danger'">
            {{ row.status == "NORMAL" ? "正常" : "禁用" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="openUpdate(row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="success"
            v-if="row.status != 'NORMAL'"
            @click="setAdminStatus(row.id, 'NORMAL')"
            >启用</el-button
          >
          <el-button
            size="mini"
            type="warning"
            @click="setAdminStatus(row.id, 'LOCKED')"
            v-else
            >禁用</el-button
          >
          <el-button size="mini" type="danger" @click="deleteAdmin(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="type == 1 ? '添加' : '修改'"
      :visible.sync="centerDialogVisible"
      width="30%"
      @close="clearForm"
      center
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        v-if="centerDialogVisible"
      >
        <el-form-item label="名字">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="form.username" :disabled="type == 0"></el-input>
        </el-form-item>
        <el-form-item label="密码" v-if="type == 1">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" v-if="type == 1">
          <el-input v-model="form.confirmPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="角色身份">
          <el-radio-group v-model="form.roleIdList">
            <el-radio label="1">超级管理员</el-radio>
            <el-radio label="2">普通管理员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetAdminList,
  AddAdmin,
  DeleteAdmin,
  SetAdminStatus,
  UpdateAdmin,
} from "@/api/user";
export default {
  name: "admin",
  data() {
    return {
      list: [],
      param: {
        currPage: 1,
        pageSize: 20,
      },
      centerDialogVisible: false,
      form: {}, //填写数据
      type: 1, //1:添加 0：修改
    };
  },
  created() {
    this.getAdminList();
  },
  methods: {
    //获取管理员信息
    getAdminList() {
      GetAdminList(this.param).then((res) => {
        this.list = res.data.data_list;
        console.log(this.list);
      });
    },
    //添加管理员
    addAdmin() {
      this.form.roleIdList = [this.form.roleIdList];
      AddAdmin(this.form).then((res) => {
        if (res.code == 200) {
          this.centerDialogVisible = false;
          this.$message.success("添加成功");
          this.getAdminList();
        }
      });
    },
    //删除管理员
    deleteAdmin(id) {
      DeleteAdmin(id).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.getAdminList();
        }
      });
    },
    //设置状态
    setAdminStatus(id, type) {
      SetAdminStatus(id, type).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getAdminList();
        }
      });
    },
    //打开修改弹窗
    openUpdate(data) {
      this.centerDialogVisible = true;
      this.type = 0;
      let role = data.role == "USER" ? "2" : "1";
      this.form = data;
      this.$set(this.form, "roleIdList", role);
      console.log(this.form);
    },
    //修改管理员信息
    updateAdmin() {
      this.form.roleIdList = [this.form.roleIdList];
      UpdateAdmin(this.form).then((res) => {
        this.centerDialogVisible = false;
        this.$message.success("修改成功");
        this.getAdminList();
      });
    },
    //提交
    submit() {
      if (this.type) {
        this.addAdmin();
      } else {
        this.updateAdmin();
      }
    },
    clearForm() {
      this.form = {};
    },
  },
};
</script>

<style>
</style>